(function() {
	Ext.onReady(function() {
		/**
		 * createStyleSheet( String cssText, String id ) : CSSStyleSheet Creates
		 * a stylesheet from a text blob of rules. These rules will be wrapped
		 * in a STYLE tag and appended to the HEAD of the document.
		 * 
		 * 用Extjs增加css样式
		 */
		// Ext.util.CSS.createStyleSheet(".c {color:red}", "css_id");
		// 为id为div01的标签添加样式c
		// Ext.get("div01").addClsOnOver("c"); //addClsOnOver鼠标移动事件
		
		/**
		 * getRule( String/String[] selector, Boolean refreshCache ) :
		 * CSSStyleRule Gets an an individual CSS rule by selector(s)
		 */
		// 获取某个css样式
		// var cssObj = Ext.util.CSS.getRule(".c", true);
		// 取得css样式的某个属性
		// alert(cssObj.style.color); //结果是：red
		
		/**
		 * 动态交换样式 swapStyleSheet( String id, String url )
		 */
		// 首先获取要变换的标签并添加单击事件
		var i = 1;
		//给按钮添加单击事件
		Ext.get('bnt1').on("click", function() {
			if (i%2 == 0) {
				//设置样式为one.css
				/*
				 * 不需要手动引入样式在页面中 <link rel="stylesheet" type="text/css" href="css/one.css">
				 * 样式会通过异步加载方式引入到页面中;
				 * swapStyleSheet函数会调整引入css样式的顺序来达到使用不同css样式效果
				 * <link id="two" rel="stylesheet" type="text/css" href="css/two.css">
				 * <link id="one" rel="stylesheet" type="text/css" href="css/one.css">
				 * swapStyleSheet函数会调整上面两个样式的顺序,
				 * 但是两个样式里的样式名字要一致，只有样式的具体内容不一致
				 */
				Ext.util.CSS.swapStyleSheet("one", "css/one.css");
				//设置id为div02的标签的样式
				Ext.get("div02").addClsOnOver("col");
				i++;
			} else {
				//设置样式为one.css
				Ext.util.CSS.swapStyleSheet("two", "css/two.css");
				//设置id为div02的标签的样式
				Ext.get("div02").addClsOnOver("col");
				i++;
			}
		});
		
		/**
		 * 根据样式的id移除一个样式属性的属性值；
		 * 只能移除动态添加的css样式，手动添加的不能移除；
		 * 如： 在页面直接用<style type="text/css">...</style>标签制定的不能移除
		 * removeStyleSheet( String id )
		 */
		//为了测试先给标签添加一个css样式；样式id为css_id
		Ext.util.CSS.createStyleSheet(".add_css { color:red; }", "css_id");
		// 为id为div01的标签添加样式c
		///Ext.get("div03").addClsOnOver("add_css"); //addClsOnOver鼠标移动事件；添加样式
		
		Ext.get("bnt2").on("click", function() {
			//alert(1);
			Ext.util.CSS.removeStyleSheet("css_id");
		});
	});
})();